<template>
  <van-nav-bar left-arrow @click-left="back">
    <template v-slot:left>
      <van-icon size="30px" :name="require('@/assets/icon/left-arrow-circle.svg')"/>
    </template>
    <template v-slot:title>
      <span class="nav-bar-title">{{ title }}</span>
    </template>
    <template v-slot:right>
      <el-dropdown @command="handleCommand">
        <UserAvatar
            :user="user"
        />
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item v-if="user.userId!==null" command="user">个人中心</el-dropdown-item>
            <el-dropdown-item v-else command="auth">登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      
    </template>
  </van-nav-bar>
  <div class="separator-div"/>
</template>

<script>
import UserAvatar from "@/components/UserAvatar.vue";
import userApi from "@/utils/api/userApi";
import {loginDialog} from "@/utils/api/axiosUtil";
import userPage from "@/utils/pages/userPage";

export default {
  name: "NavBar",
  components: {UserAvatar},
  emits: ['back'],
  created() {
    this.initUser()
  },
  props: {
    title: String,
    back: {
      type: Function,
      default: ()=>{
        history.back()
      }
    }
  },
  data(){
    return {
      user: {
        userId: null,
        uname: null,
        imgUrl: null,
        self: false
      }
    }
  },
  methods: {
    async initUser(){
      this.user = await userApi.needUserInfo()
    },
    handleCommand(com){
      switch (com){
        case 'user':
          userPage.user().open().blank()
          break
        case 'auth':
          loginDialog()
          break
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/style/less/all.less";
.nav-bar-title{
  font-size: 16px;
  line-height: 23px;
  color: @default_color;
}
</style>